<!--
 * @Author: lixb
 * @Date: 2020-08-24 15:36:05
 * @LastEditTime: 2020-09-23 18:02:40
 * @Descripttion: 企业开票信息
-->
<template>
  <div class="app-container">
    <el-card class="invoice-tips">
      <div class="title">温馨提示</div>
      <p class="text">
        • 以下开票信息将会在“薪福利”App中向员工展示，请确保信息准确无误，以免开票失误。
      </p>
    </el-card>
    <el-card class="invoice-main">
      <wf-el-auth-button
        type="primary"
        auth-key="WALFARE-QYKPXX-BJKPXX"
        @click="handleClickUpdate()"
      >
        修改资料
      </wf-el-auth-button>
      <div class="info">
        <el-form :inline="true" :model="formInfo" label-width="100px" style="margin-top: 20px">
          <el-form-item label="公司：">
            <span>{{ formInfo.organizationName }}</span>
          </el-form-item>
          <el-form-item label="单位地址：">
            <span>{{ formInfo.address }}</span>
          </el-form-item>
          <el-form-item label="开户银行：">
            <span>{{ formInfo.openingLicense }}</span>
          </el-form-item>
          <el-form-item label="税号：">
            <span>{{ formInfo.taxNumber }}</span>
          </el-form-item>
          <el-form-item label="电话号码：">
            <span>{{ formInfo.telephone }}</span>
          </el-form-item>
          <el-form-item label="银行账号：">
            <span>{{ formInfo.bankCardNumber }}</span>
          </el-form-item>
          <el-form-item label="纳税人资质：">
            <span>
              {{
                formInfo.taxType == 1 ? '一般纳税人' : formInfo.taxType == 0 ? '小规模纳税人' : ''
              }}
            </span>
          </el-form-item>
          <el-form-item label="税票种类：">
            <span>
              {{
                formInfo.taxType == 0
                  ? '仅可开具普通发票'
                  : '开具发票时，建议开票方开增值税专用发票'
              }}
            </span>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <updateInfo ref="updateDrawer" :form-info="updateInfo" @getInfo="getInfo"></updateInfo>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { deepClone } from '@/utils/base';
  import updateInfo from './components/update.vue';
  import { getComponyInfo } from '@/api/companyInfo';
  export default {
    components: {
      updateInfo,
    },
    data() {
      return {
        formInfo: {},
        updateInfo: {},
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
    },
    watch: {},
    activated() {
      this.getInfo();
    },
    mounted() {
      // this.getInfo();
    },
    methods: {
      handleClickUpdate() {
        this.updateInfo = deepClone(this.formInfo);
        this.$refs.updateDrawer.init();
      },
      getInfo() {
        let organiId = this.userInfo.organId;
        // console.log(this.userInfo);
        // console.log(organiId);
        getComponyInfo(organiId).then(res => {
          this.formInfo = res.data;
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .invoice-tips {
    .title {
      font-weight: bold;
      font-size: 16px;
    }
    .text {
      color: #7f848b;
      font-size: 14px;
    }
  }
  .invoice-main {
    margin-top: 20px;
    .el-form--inline .el-form-item {
      width: 45%;
    }
  }
</style>
